<!-- 每人详细信息页面 -->
<template>
  <div id="dorm-information">
    <!-- 显示详细信息标题 -->
    <h3>详细信息</h3>
    <!-- 显示人员详细信息的表格 -->
    <table class="info-table">
      <thead>
        <tr>
          <!-- 表格列标题 -->
          <th>姓名</th>
          <th>学历</th>
          <th>宿舍类型</th>
          <th>级别</th>
          <th>宿舍号</th>
          <th>电话</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <!-- 显示人员的姓名 -->
          <td>{{ personName }}</td>
          <!-- 显示人员的学历 -->
          <td>{{ personEducation }}</td>
          <!-- 显示人员的宿舍类型 -->
          <td>{{ dormitoryType }}</td>
          <!-- 显示人员的级别 -->
          <td>{{ personLevel }}</td>
          <!-- 显示人员的宿舍号 -->
          <td>{{ dormitoryNumber }}</td>
          <td>{{ personphone }}</td>
        </tr>
      </tbody>
    </table>
    <!-- 修改人员信息表单 -->
    <div v-if="showEditForm" class="edit-form" style="margin-top: -20px;">
      <h3>修改信息</h3>
      <input v-model="editedPerson.education" placeholder="学历" />
      <select v-model="editedPerson.dormitoryType">
        <option value="男宿舍">男宿舍</option>
        <option value="女宿舍">女宿舍</option>
      </select>
      <input v-model="editedPerson.level" placeholder="级别" />
      <button @click="updatePerson">保存</button>
      <button @click="showEditForm = false">取消</button>
    </div>
    <!-- <button @click="showEditForm = true"
      style="margin-right: 5px; top: -1px; position: relative; font-family: '宋体';">修改信息</button> -->
    <!-- 返回按钮，点击触发 goBack 方法 -->
    <button @click="goBack" class="back-button" style="top: -1px;">返回</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 用于存储人员的宿舍类型
      dormitoryType: "",
      // 用于存储人员的姓名
      personName: "",
      // 用于存储人员的宿舍号
      dormitoryNumber: "",
      // 用于存储人员的学历
      personEducation: "",
      // 用于存储人员的级别
      personLevel: "",
      personphone: "",
      // 控制修改人员表单的显示与隐藏
      showEditForm: false,
      // 编辑人员信息对象
      editedPerson: {}
    };
  },
  created() {
    // 从路由参数中获取宿舍类型
    const type = this.$route.params.type;
    // 从路由参数中获取人员姓名
    const name = this.$route.params.name;
    // 从路由参数中获取宿舍号
    const dormitoryNumber = this.$route.params.dormitoryNumber;
    const phone = this.$route.params.phone;
    // 将获取的宿舍类型赋值给 data 中的 dormitoryType
    this.dormitoryType = type;
    // 将获取的人员姓名赋值给 data 中的 personName
    this.personName = name;
    // 将获取的宿舍号赋值给 data 中的 dormitoryNumber
    this.dormitoryNumber = dormitoryNumber;
    this.personphone = phone;
    // 根据人员姓名查找并设置人员的详细信息
    this.setPersonDetails(name);
  },
  methods: {
    setPersonDetails(name) {
      // 所有人员的详细信息数组
      const allPersons = [
        { name: "曹磊", education: "本科", level: "基层", phone: "12345678900" },
        { name: "孙柏龄", education: "本科", level: "基层", phone: "12345678901" },
        { name: "张文俊", education: "本科", level: "基层", phone: "12345678902" },
        { name: "丁彪", education: "硕士", level: "高层", phone: "12345678903" },
        { name: "阳慧", education: "大专", level: "基层", phone: "12345678904" },
        { name: "周洲", education: "大专", level: "基层", phone: "12345678905" },
        { name: "高兰", education: "本科", level: "基层", phone: "12345678906" },
        { name: "小妹", education: "大专", level: "基层", phone: "12345678907" },
        { name: "小花", education: "本科", level: "基层", phone: "12345678908" },
        { name: "小美", education: "本科", level: "基层", phone: "12345678909" },
        { name: "小景", education: "本科", level: "基层", phone: "12345678910" },
        { name: "小晓", education: "本科", level: "基层", phone: "12345678911" },
        { name: "小玲", education: "本科", level: "基层", phone: "12345678912" },
      ];
      // 查找与输入姓名匹配的人员信息
      const person = allPersons.find(person => person.name === name);
      if (person) {
        // 如果找到匹配人员，将其学历和级别赋值给 data 中的对应属性
        this.personEducation = person.education;
        this.personLevel = person.level;
        this.personphone = person.phone;
        // 初始化编辑对象
        this.editedPerson = {
          name: this.personName,
          education: this.personEducation,
          dormitoryType: this.dormitoryType,
          level: this.personLevel,
          phone: this.personphone
        };
      } else {
        // 如果未找到匹配人员，将学历和级别设置为未知
        this.personEducation = "未知";
        this.personLevel = "未知";
        this.personphone = "未知";
      }
    },
    updatePerson() {
      // 找到父组件中的 tasks 数组
      const parentTasks = this.$parent.tasks;
      // 找到父组件中的男宿舍和女宿舍名单
      const maleDormitory = this.$parent.maleDormitory;
      const femaleDormitory = this.$parent.femaleDormitory;

      // 查找要更新的人员在 tasks 数组中的索引
      const index = parentTasks.findIndex(task => task.name === this.personName);
      if (index !== -1) {
        // 更新 tasks 数组中的人员信息
        parentTasks[index] = { ...this.editedPerson };

        // 更新宿舍名单
        if (this.editedPerson.dormitoryType === "男宿舍") {
          if (!maleDormitory.includes(this.personName)) {
            maleDormitory.push(this.personName);
            const femaleIndex = femaleDormitory.indexOf(this.personName);
            if (femaleIndex !== -1) {
              femaleDormitory.splice(femaleIndex, 1);
            }
          }
        } else {
          if (!femaleDormitory.includes(this.personName)) {
            femaleDormitory.push(this.personName);
            const maleIndex = maleDormitory.indexOf(this.personName);
            if (maleIndex !== -1) {
              maleDormitory.splice(maleIndex, 1);
            }
          }
        }

        // 更新当前组件显示的信息
        this.personEducation = this.editedPerson.education;
        this.dormitoryType = this.editedPerson.dormitoryType;
        this.personLevel = this.editedPerson.level;

        // 关闭编辑表单
        this.showEditForm = false;
      }
    },
    goBack() {
      // 使用路由导航返回上一页
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
#dorm-information {
  font-family: '宋体';
  text-align: center;
  /* margin-top: 3.125rem; */
}

#dorm-information h3 {
  position: relative;
  top: 10px;
  /* 可以根据需要调整数值 */
}

/* wo */
.edit-form button {
  margin-top: -8x;
}

.edit-form input,
.edit-form select,
.edit-form button {

  margin: 3px 3px;
  font-family: '宋体';
}

.info-table {
  margin: 20px auto;
  border-collapse: collapse;
  width: 50%;
}

.info-table th,
.info-table td {
  border: 1px solid #ddd;
  padding: 8px;
}

.info-table th {
  background-color: #f2f2f2;
}

.back-button {
  /*返回/返回首页按钮设置*/
  margin-top: -5px;
  padding: 3px 8px;
  font-size: 13px;
  cursor: pointer;
  color: white;
  background-color: gray;
  border: none;
  /* border-radius: 5px; */
  /* 按钮圆角设置 */
}

.back-button:hover {
  background-color: darkgray;
}
</style>